<template>
  <div>
    <base-dialog
      :visible="dialogVisible"
      title="忘记密码"
      width="5rem"
      :footer="true"
      @handleDialogCancle="handleDialogCancle"
      @handleDialogSubmit="handleDialogSubmit"
    >
      <el-form ref="form" :model="model" label-width="100px" class="earlywarning-form" :rules="rules" label-position="top">
        <!-- <el-row>
                    <el-col>
                        <el-form-item label="原密码" prop="currentPassword">
                            <el-input type="password" autocomplete="off" v-model="model.currentPassword" maxlength="20"
                                placeholder="原密码"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row> -->
        <el-row>
          <el-col>
            <el-form-item label="手机号码" prop="phone">
              <el-input autocomplete="off" v-model="model.phone" maxlength="20" placeholder="请输入" @input="removeSpace1"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item label="新密码" prop="newPassword">
              <el-input
                key="passwordType"
                ref="newPassword"
                autocomplete="off"
                v-model="model.newPassword"
                maxlength="20"
                :type="newPasswordType"
                @blur="capsTooltip = false"
                placeholder="6-20位数字、字母、符号"
                @input="removeSpace2"
              />
              <span class="show-pwd" @click="showPwd(0)">
                <svg-icon :icon-class="newPasswordType === 'password' ? 'eye' : 'eye-open'" />
              </span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item label="重复密码" prop="checkNewPassword">
              <el-input
                key="passwordType"
                ref="checkNewPassword"
                autocomplete="off"
                v-model="model.checkNewPassword"
                maxlength="20"
                :type="checkNewPasswordType"
                @blur="capsTooltip = false"
                placeholder="请输入"
                @input="removeSpace3"
              />
              <span class="show-pwd" @click="showPwd(1)">
                <svg-icon :icon-class="checkNewPasswordType === 'password' ? 'eye' : 'eye-open'" />
              </span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item label="验证码" prop="phoneCode">
              <el-input autocomplete="off" v-model="model.phoneCode" maxlength="20" placeholder="请输入" @input="removeSpace4">
                <span class="show-code" style="color: #0076ff" slot="suffix" :disabled="getCodeSecond != 60" @click="getMobileCode()">
                  {{ getCodeSecond == 60 ? '获取验证码' : getCodeSecond + '秒后重新获取' }}
                </span>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </base-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { sendResetPwdCode, resetPwd } from '@/api/user'
import baseDialog from '@/components/BaseDialog'

export default {
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
  },
  components: { baseDialog },
  data() {
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.model.newPassword) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      model: {
        currentPassword: null,
        newPassword: null,
        checkNewPassword: null,
        phone: null,
      },
      rules: {
        phone: [{ required: true, trigger: 'blur', message: '必填' }],
        currentPassword: [{ required: true, trigger: 'blur', message: '必填' }],
        newPassword: [{ required: true, trigger: 'blur', message: '必填' }],
        checkNewPassword: [
          { required: true, trigger: 'blur', message: '必填' },
          { validator: validatePass2, trigger: 'blur' },
        ],
        phoneCode: [{ required: true, trigger: 'blur', message: '必填' }],
      },
      getCodeSecond: 60,
      checkNewPasswordType: 'password',
      newPasswordType: 'password',
    }
  },
  watch: {},
  computed: {
    ...mapGetters(['sidebar', 'avatar', 'device', 'userName']),
  },
  mounted() {},
  destroyed() {},
  methods: {
    handleDialogCancle() {
      this.$refs['form'].resetFields()
      this.$emit('handleDialogCancle')
    },
    handleDialogSubmit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          if (this.userName == 'admin1') {
            this.$message({
              message: '管理员账号不可修改',
              type: 'error',
            })
          } else {
            let data = {
              phoneNumber: this.model.phone,
              code: this.model.phoneCode,
              password: this.model.newPassword,
              cPassword: this.model.checkNewPassword,
            }
            resetPwd(data).then(res => {
              // this.$emit("handleDialogSubmit", this.model);
              this.$message.info('密码修改成功')
              this.$emit('handleDialogCancle')

              // this.$alert("密码修改成功，将退出重新登录", "提示", {
              //     showClose: false,
              //     confirmButtonText: "确定",
              //     callback: async (action) => {
              //         await this.$store.dispatch('user/logout')
              //         this.$router.push(`/login?redirect=${this.$route.fullPath}`)
              //     },
              // });
            })
          }
        }
      })
    },
    getMobileCode() {
      if (this.getCodeSecond !== 60) {
        return
      }
      if (this.model.phone == null || this.model.phone.length !== 11) {
        this.$message.warning(`手机号格式不正确`)
        return
      }
      let data = {
        phoneNumber: this.model.phone,
      }
      sendResetPwdCode(data).then(res => {
        this.$message.info('发送成功')
        this.getCodeSecond--
        this.timerGetCode = setInterval(() => {
          this.getCodeSecond--
          if (this.getCodeSecond === 0) {
            this.getCodeSecond = 60
            clearInterval(this.timerGetCode)
          }
        }, 1000)
      })

      // /
      // sendPhoneCode(this.loginForm.mobile).then((response) => {
      //     if (response.indexOf("发送验证码成功") !== -1) {
      //     Message({
      //         message: "发送验证码成功",
      //         type: "success",
      //         duration: 5 * 1000,
      //     });
      //     this.getCodeSecond--;
      //     this.timerGetCode = setInterval(() => {
      //         this.getCodeSecond--;
      //         if (this.getCodeSecond === 0) {
      //         this.getCodeSecond = 60;
      //         clearInterval(this.timerGetCode);
      //         }
      //     }, 1000);
      //     } else {
      //     Message({
      //         message: response,
      //         type: "error",
      //         duration: 5 * 1000,
      //     });
      //     }
      // });
    },
    showPwd(value) {
      if (value == 0) {
        if (this.newPasswordType === 'password') {
          this.newPasswordType = ''
        } else {
          this.newPasswordType = 'password'
        }
        this.$nextTick(() => {
          this.$refs.newPassword.focus()
        })
      } else {
        if (this.checkNewPasswordType === 'password') {
          this.checkNewPasswordType = ''
        } else {
          this.checkNewPasswordType = 'password'
        }
        this.$nextTick(() => {
          this.$refs.checkNewPassword.focus()
        })
      }
    },
    removeSpace1(value) {
      this.model.phone = value.trimStart().trimEnd()
      //this.$message.warning("不能输入空格")
    },
    removeSpace2(value) {
      this.model.newPassword = value.trimStart().trimEnd()
      //this.$message.warning("不能输入空格")
    },
    removeSpace3(value) {
      this.model.checkNewPassword = value.trimStart().trimEnd()
      //this.$message.warning("不能输入空格")
    },
    removeSpace4(value) {
      this.model.phoneCode = value.trimStart().trimEnd()
      //this.$message.warning("不能输入空格")
    },
  },
}
</script>

<style lang="scss" scoped>
$dark_gray: #889aa4;
.show-code {
  color: #0076ff;
  cursor: pointer;
}
.show-pwd {
  position: absolute;
  right: 10px;
  top: 7px;
  font-size: 16px;
  color: $dark_gray;
  cursor: pointer;
  user-select: none;
}
</style>
